<template>
  <div class="page">
    <MNavbar title="商家工作台" />

    <!-- 顶部横幅：渐变背景、引导CTA -->
    <div class="section">
      <div class="hero-banner">
        <div class="hero-left">
          <div class="hero-title">欢迎回来</div>
          <div class="hero-sub">快速管理商品、追踪订单与查看资金概况</div>
          <div class="hero-actions">
            <router-link class="btn btn-primary" to="/product/list">立即上架商品</router-link>
            <router-link class="btn btn-outline" to="/order/list" style="margin-left:12px">查看订单</router-link>
          </div>
        </div>
        <div class="hero-right">
          <!-- 简洁占位插画：SVG -->
          <svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="6" y="30" width="108" height="36" rx="8" fill="rgba(255,255,255,0.15)"/>
            <rect x="16" y="20" width="64" height="10" rx="5" fill="rgba(255,255,255,0.2)"/>
            <rect x="16" y="42" width="80" height="6" rx="3" fill="rgba(255,255,255,0.35)"/>
            <rect x="16" y="52" width="56" height="6" rx="3" fill="rgba(255,255,255,0.25)"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 关键指标：4列响应式 -->
    <div class="section">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="icon-circle"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 3v18h18" stroke="currentColor" stroke-width="2"/><path d="M7 15l4-4 3 3 5-6" stroke="currentColor" stroke-width="2"/></svg></div>
          <div class="col"><div class="value">—</div><div class="label">待处理订单</div></div>
        </div>
        <div class="stat-card">
          <div class="icon-circle"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" stroke="currentColor" stroke-width="2"/><path d="M3 7l3-4h12l3 4" stroke="currentColor" stroke-width="2"/></svg></div>
          <div class="col"><div class="value">—</div><div class="label">在售商品</div></div>
        </div>
        <div class="stat-card">
          <div class="icon-circle"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v18" stroke="currentColor" stroke-width="2"/><path d="M7 8h10M7 12h10M7 16h10" stroke="currentColor" stroke-width="2"/></svg></div>
          <div class="col"><div class="value">—</div><div class="label">今日收款</div></div>
        </div>
        <div class="stat-card">
          <div class="icon-circle"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4h16v16H4z" stroke="currentColor" stroke-width="2"/><path d="M4 10h16" stroke="currentColor" stroke-width="2"/></svg></div>
          <div class="col"><div class="value">—</div><div class="label">库存预警</div></div>
        </div>
      </div>
    </div>

    <!-- 快捷入口：卡片化，悬浮上浮 -->
    <div class="section">
      <div class="quick-grid">
        <router-link class="quick-card" to="/product/list">
          <div class="icon-circle soft-blue">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 7l9-4 9 4v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" stroke="currentColor" stroke-width="2"/>
              <path d="M3 7l9 4 9-4" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="quick-name">商品管理</div>
          <div class="quick-desc">快速上架与维护商品</div>
        </router-link>
        <router-link class="quick-card" to="/order/list">
          <div class="icon-circle soft-indigo">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
              <path d="M8 8h8M8 12h8M8 16h5" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="quick-name">订单管理</div>
          <div class="quick-desc">查询/处理订单</div>
        </router-link>
        <router-link class="quick-card" to="/finance/overview">
          <div class="icon-circle soft-green">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 3v18M8 7h5.5a3.5 3.5 0 1 1 0 7H10" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="quick-name">资金概览</div>
          <div class="quick-desc">收入与结算情况</div>
        </router-link>
        <router-link class="quick-card" to="/settings/profile">
          <div class="icon-circle soft-yellow">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="currentColor" stroke-width="2"/>
              <path d="M9 21v-6h6v6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="quick-name">店铺设置</div>
          <div class="quick-desc">店铺资料与联系人</div>
        </router-link>
      </div>
    </div>

    <!-- 待办 -->
    <div class="section">
      <div class="card">
        <div class="card-title">待办事项</div>
        <div class="empty-state">暂无待办</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import MNavbar from '@/components/MNavbar.vue'
</script>

